<template>
	<view class="goods-list">
		<custom-tabs type="c1" :value="current" @change="change" :tabSpacing="30"
			@tabsScrolltolower="tabsScrolltolower">
			<custom-tab-pane style="width:100%" :label="item.name" name="c1_2" v-for="item in tabsList.list"
				:key="item.id">
				<scroll-view scroll-y class="scroll-view" @scrolltolower="scrolltolower">
					<view class="goods-list-wrapper">
						<goodsItem v-for="subItem in item.goodsList.list" :key="subItem.id" :goodsDetail="subItem" />
						<g-placeholder
							v-if="!item.goodsList.list.length&&item.goodsList.loadStatus===LOADING_STATUS.NOMORE" />
						<uni-load-more iconType="circle" :status="item.goodsList.loadStatus" style="position: relative;
							left: 50%;transform: translateX(-50%);"
							v-if="item.goodsList.list.length||item.goodsList.loadStatus!==LOADING_STATUS.NOMORE" />
					</view>
				</scroll-view>
			</custom-tab-pane>
		</custom-tabs>
	</view>
</template>

<script lang="ts">
	export default {
		name: 'navbar',
		options: {
			styleIsolation: 'shared'
		},
	}
</script>

<script lang="ts" setup>
	import { computed, ref, Ref, reactive, onMounted, defineProps, defineExpose } from 'vue';
	import REST_URL from '@/http/http.restUrl';
	import goodsItem from '../goods-item/goodsItem';
	import type { ITab, ITabsList, ITabsRequestResult, IGoodsList, IGoodsListRequestOptions, IChangeEvent, IGoodsListRequestResult, ITabsRequestOptions, IGoodsListExpose } from './types';
	import { useStore } from 'vuex';
	import { LOADING_STATUS } from '@/enum/loadingStatus';
	import { GET_STORE_USERINFO } from '@/store/gettersType';

	const store = useStore();

	interface IProps {
		searchKeywords : string
	}




	const props = withDefaults(defineProps<IProps>(), {
		searchKeywords: '',
	})

	const current : Ref<number> = ref(0);

	const goodsListTemp : IGoodsList = {
		pageNum: 1,
		pageSize: 6,
		list: [],
		loadStatus: LOADING_STATUS.MORE,
	}

	const tabsList : ITabsList = reactive({
		pageNum: 1,
		pageSize: 5,
		list: [{ name: '全部', goodsList: goodsListTemp }],
		loadStatus: LOADING_STATUS.MORE,
	});







	const getTabsList = async () : Promise<void> => {
		if (tabsList.loadStatus !== LOADING_STATUS.MORE) return
		tabsList.loadStatus = LOADING_STATUS.LOADING;

		const options : ITabsRequestOptions = {
			customer_id: store.getters[GET_STORE_USERINFO].id,
			page: tabsList.pageNum,
			page_num: tabsList.pageSize,
		}

		const { data, total } : ITabsRequestResult = (await uni.http.POST(REST_URL.goodsTypeTabsList, options)).data;
		tabsList.list.push(...data);
		tabsList.list = tabsList.list.map((item : ITab) => {
			if (!item.goodsList) {
				item.goodsList = JSON.parse(JSON.stringify(goodsListTemp));
			}
			return item
		})
		tabsList.loadStatus = tabsList.list.length >= total ? LOADING_STATUS.NOMORE : LOADING_STATUS.MORE;
		tabsList.pageNum++;
		console.log(tabsList.list);
	}

	const getGoodsListByTabId = async () : Promise<void> => {

		const currentTabsIndex : number = current.value;

		if (tabsList.list[currentTabsIndex].goodsList.loadStatus !== LOADING_STATUS.MORE) return

		tabsList.list[currentTabsIndex].goodsList.loadStatus = LOADING_STATUS.LOADING;

		const options : IGoodsListRequestOptions = {
			customer_id: store.getters[GET_STORE_USERINFO].id,
			page_num: tabsList.list[currentTabsIndex].goodsList.pageSize,
			page: tabsList.list[currentTabsIndex].goodsList.pageNum,
			type_id: tabsList.list[currentTabsIndex].id,
			product_name: props.searchKeywords,
		}

		tabsList.list[currentTabsIndex].goodsList.keywords = props.searchKeywords;

		const { data, total } : IGoodsListRequestResult = (await uni.http.POST(REST_URL.getGoodsListByTabId, options)).data;
		tabsList.list[currentTabsIndex].goodsList.list.push(...data);
		tabsList.list[currentTabsIndex].goodsList.loadStatus = tabsList.list[currentTabsIndex].goodsList.list.length >= total ? LOADING_STATUS.NOMORE : LOADING_STATUS.MORE;
		tabsList.list[currentTabsIndex].goodsList.pageNum++;
		console.log(tabsList.list[currentTabsIndex].goodsList);
	}


	const getGoodsListBySearchKeywords = async () => {
		tabsList.list[current.value].goodsList.loadStatus = LOADING_STATUS.MORE;
		tabsList.list[current.value].goodsList.pageNum = 1;
		tabsList.list[current.value].goodsList.list = [];
		await getGoodsListByTabId();
		if (!tabsList.list[current.value].goodsList.list.length) {
			uni.prompt.$showToast(`无${props.searchKeywords}相关商品`)
		}
	}






	const scrolltolower = () => {
		console.log('scrolltolower')
		getGoodsListByTabId();
	}

	const tabsScrolltolower = () : void => {
		getTabsList();
	}



	const change = (e ?: IChangeEvent) => {
		if (e) {
			current.value = e.value;
		}
		//有搜索关键字且与该栏目上次搜索的关键字相同，依旧延续条件搜索即可
		// if(props.searchKeywords.length&&tabsList.list[current.value].goodsList.keywords?.length&&props.searchKeywords==tabsList.list[current.value].goodsList.keywords){
		// 	getGoodsListByTabId();
		// //有关键字但是与该栏目上次搜索的关键字不相同，重新调用根据关键字搜索
		// }else if(props.searchKeywords.length&&tabsList.list[current.value].goodsList.keywords?.length&&props.searchKeywords==tabsList.list[current.value].goodsList.keywords){

		// }
		//有搜索关键字
		console.log('搜索栏关键字字数', props.searchKeywords)
		if (props.searchKeywords.length) {
			//与该栏目上次搜索的关键字相同
			if (props.searchKeywords == tabsList.list[current.value].goodsList.keywords) {
				console.log('与该栏目上次搜索的关键字相同')
				getGoodsListByTabId();
			} else {
				//与该栏目上次搜索的关键字不同
				console.log('与该栏目上次搜索的关键字不同')
				getGoodsListBySearchKeywords();
			}
			//没有搜索关键字
		} else {
			//该栏目上次获取数据有关键字
			if (tabsList.list[current.value].goodsList.keywords?.length) {
				//重置一下再获取
				tabsList.list[current.value].goodsList.loadStatus = LOADING_STATUS.MORE;
				tabsList.list[current.value].goodsList.pageNum = 1;
				tabsList.list[current.value].goodsList.list = [];
				getGoodsListByTabId();
			} else {
				//该栏目上次获取数据没有关键字
				//直接延续条件获取
				getGoodsListByTabId();
			}
		}


	}

	onMounted(async () => {
		await uni.loginManger.$interceptor;
		await getTabsList();
		getGoodsListByTabId();
	})

	defineExpose<IGoodsListExpose>({
		getGoodsListBySearchKeywords,
		change
	})
</script>

<style scoped lang="scss">
	@import "./goodsList.scss";
</style>